<template>
  <div class="table-box" v-loading="loading">
    <template v-if="!loading">
      <ProTable
        :ref="(ref: any) => setTableRef(ref, 'ProTable')"
        :columns="tableGather.dataGrid.columns"
        :request-api="tableGather.dataGrid.requestApi"
        :request-auto="false"
        @cell-click="mainCellClick"
        :data-callback="tableGather.dataGrid?.dataCallback"
      >
        <template #tableHeader>
          <GlobalButton :button-list="tableGather.dataGrid.headButtonList"></GlobalButton>
        </template>

        <template #operation="{ row }">
          <GlobalButton :button-list="tableGather.dataGrid.rowButtonList" :row-params="row"></GlobalButton>
        </template>
      </ProTable>

      <mDrawer :visible="true" :is-close="drawerData.isClose" v-if="tableGather.bottomDataGrid?.length">
        <template #content>
          <el-tabs v-model="drawerData.activeName" class="self-adaption-tabs" @tab-click="switchoverTabs">
            <el-tab-pane v-for="item of tableGather.bottomDataGrid" :label="item.title" :name="item.key" :key="item.key">
              <ProTable
                :ref="(ref: any) => setTableRef(ref, item.key)"
                :request-auto="item.requestAuto"
                :pagination="item?.pagination"
                :columns="item.columns"
                :data="item.data"
                :init-param="item?.initParam"
                :show-summary="item?.showSummary"
                :summary-method="item?.getSummary"
                :request-api="item?.requestApi"
                :data-callback="item?.dataCallback"
              >
                <template #tableHeader>
                  <GlobalButton :button-list="item.headButtonList"></GlobalButton>
                </template>

                <template #operation="{ row, $index }">
                  <GlobalButton :button-list="item.rowButtonList" :row-params="row" :row-index="$index"></GlobalButton>
                </template>
              </ProTable>
            </el-tab-pane>
          </el-tabs>
        </template>
      </mDrawer>
    </template>
  </div>
</template>
<script setup lang="ts">
import { basicGridProps } from "./customClass/dataGrid";
import { useInit } from "./hooks/use-init";
const { tableGather, loading, tablesRef, init, setTableRef } = useInit();

// 刷新对应表格数据
const refreshTableData = () => {
  const { row, activeName } = drawerData;
  const { id } = row || {};

  if (!id) return;

  // 获取当前点击表格对应数据
  const tableData: basicGridProps = tableGather.value.bottomDataGrid.find((table: any) => table.key === activeName);
  if (tableData.initParam) {
    tableData.initParam.id = id;
  }
  // 是否需要特殊处理数据
  if (tableData.getDrawerParams) {
    tableData.getDrawerParams(row, tableData, tablesRef, tableGather);
  }
};
const { drawerData, switchoverTabs, openDrawer } = useDrawerData(refreshTableData, "default");

// 主表格点击
const mainCellClick = (row: any) => {
  row.id && openDrawer(row);
};

onBeforeMount(() => {
  init();
});
</script>
